<template>
    <div>
        <van-submit-bar
            :price="$store.state.countPrice * 100"
            :button-text="$store.state.countPrice < $store.state.shopInfo.startPrice ? `¥${$store.state.shopInfo.startPrice || 0}起送` : '去结算'"
            @submit="onSubmit"
            >
            <div class="shopcar shake" id="shopcar" :class="$store.state.countPrice == 0 ? '' : 'current'"></div>
            <div class="sendPrice">配送费{{$store.state.shopInfo.sendPrice || 0}}元</div>
            <span slot="tip" :class="$store.state.shopInfo.startPrice > $store.state.countPrice ? '' : 'green'">
                {{$store.state.shopInfo.startPrice > $store.state.countPrice ? '还差' + ($store.state.shopInfo.startPrice  - $store.state.countPrice).toFixed(2) + '元起送' : '可以开始下单咯'}}
            </span>
        </van-submit-bar>
    </div>
</template>

<script>
export default {
    methods: {
        onSubmit() {
            if (this.$store.state.countPrice >= this.$store.state.shopInfo.startPrice) {
                this.$router.push({path: '/pay'})
            }
        },
    }
}
</script>

<style lang="less" scoped>
    .van-submit-bar {
        background: #3b3b3c;
        .shopcar {
            position: absolute;
            left: 12px;
            bottom: 7.5px;
            width: 50px; 
            height: 50px;
            box-sizing: border-box;
            border-radius: 100%;
            background-image: radial-gradient(circle,#363636 6.266667vw,#444 0);
            border: 5px solid #444;
            box-shadow: 0 -0.8vw 0.533333vw 0 rgba(0,0,0,.1);
            will-change: transform;
            &::before {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: url('../../../static/images/shopcar1.svg') 50% no-repeat;
                background-size: 23px;
                content: "";
            }
        }
        .sendPrice {
            color: #fff;
            margin-left: 70px;
            font-size: 12px;
        }
        .current {
            background: #3190e8;
            &::before {
                background: url('../../../static/images/shopcar2.svg') 50% no-repeat;
                background-size: 23px;
            }
        }
        .van-submit-bar__price {
            color: #fff;
        }
        .van-submit-bar__tip {
            text-align: center;
            font-size: 12px;
            padding: 5px;
        }
        .green {
            color: #38ca73;
        }
    }
</style>
